﻿var tmnt = {}; // wrapper
tmnt.characters = []; //array
tmnt.Turtle = function (name, weapon, picture, species) {
    this.name = name;
    this.weapon = weapon;
    this.picture = picture;
    this.species = species;
}
tmnt.Turtle.prototype.isEditing = false;
tmnt.myAdd = function () {
    var name = document.getElementById('name');
    var weapon = document.getElementById('weapon');
    var picture = document.getElementById('picture');
    var species = document.getElementById('species');
    var turtle = new tmnt.Turtle(name.value, weapon.value, picture.value, species.value);
    tmnt.characters.push(turtle);
    name.value = '';
    weapon.value = '';
    picture.value = '';
    species.value = '';

    tmnt.drawTable();
    tmnt.myPost(turtle);
};
tmnt.drawTable = function () {
    tmnt.characters.sort(tmnt.nameSort);

    var h = "<div class='container'><div class='row'>"
    for (var i in tmnt.characters) {
        h += "<div class='col-md-4'>";
        if (tmnt.characters[i].isEditing === true) {
            h += '<input type="text" id="eName" placeholder="Name" value="' + tmnt.characters[i].name + '"/>'
            h += '<input type="text" id="eWeapon" placeholder="Weapon"  value="' + tmnt.characters[i].weapon + '" />'
            h += '<select id="eSpecies" class="input-sm form-control">';
            h += '<option selected="selected" value="Turtle">Turtle</option>';
            h += '<option value="Human">Human</option>';
            h += '<option value="Rat">Rat</option>';
            h += '<option value="Other">Other</option>';
            h += '</select>';
            h += '<input type="text" id="ePicture" placeholder="Picture" value="' + tmnt.characters[i].picture + '" />'
            h += "<div class='btn btn-success btn-sm btn-block center-block' onclick='tmnt.myPatch(" + i + ")'>Save</div>"
        } else {
            h += "<h2>" + tmnt.characters[i].name + "</h2>";
            h += "<h3>" + tmnt.characters[i].weapon + "</h3>";
            h += "<h4>" + tmnt.characters[i].species + "</h4>";
            h += "<div><img src='" + tmnt.characters[i].picture + "' class='img-thumbnail img-responsive' style='height: 300px; width: 300px;'/></div>";
            h += "<div class='btn btn-warning btn-sm btn-block center-block' onclick='tmnt.myEdit(" + i + ")'>Edit</div>"
            h += "<div class='btn btn-danger btn-sm btn-block center-block' onclick='tmnt.myDelete(" + i + ")'>Delete</div>"
        }
        h += "</div>"
    }
    h += "</div></div>"
    document.getElementById('one').innerHTML = h;
};
tmnt.myPost = function (turtle) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://9er.firebaseio.com/.json");
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 400) {
            var data = JSON.parse(xhr.response);
            turtle.key = data.name;
        }
        else {
            console.log("Error on: " + xhr.status);
        }

    };
    xhr.onerror = function () {
        console.log("Communication error!");
    };
    xhr.send(JSON.stringify(turtle));
};
tmnt.myGet = function () {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://9er.firebaseio.com/.json");
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 400) {
            var data = JSON.parse(xhr.response);
            console.log(data);
            tmnt.characters = [];
            for (var i in data) {
                var turtle = data[i];
                turtle.key = i;
                turtle.__proto__ = tmnt.Turtle.prototype;
                tmnt.characters.push(turtle);
            }
            tmnt.drawTable();
        } else {
            console.log("error");
        }
    }
    xhr.onerror = function () {
        console.log("error on communication");
    }
    xhr.send();
};
tmnt.myGet();
tmnt.myEdit = function (i) {
    tmnt.characters[i].isEditing = true;
    tmnt.drawTable();
};
tmnt.myPatch = function (i) {
    delete tmnt.characters[i].isEditing;
    var name = document.getElementById("eName").value;
    var weapon = document.getElementById("eWeapon").value;
    var picture = document.getElementById("ePicture").value;
    var species = document.getElementById("eSpecies").value;
    var turtle = new tmnt.Turtle(name, weapon, picture, species);
    var xhr = new XMLHttpRequest();
    xhr.open("PATCH", "https://9er.firebaseio.com/" + tmnt.characters[i].key + ".json");
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 400) {
            console.log("patch success");
            tmnt.myGet();
        }
        else {
            console.log("Error on: " + xhr.status);
        }

    };
    xhr.onerror = function () {
        console.log("Communication error!");
    };
    xhr.send(JSON.stringify(turtle));
};
tmnt.myDelete = function (i) {
    var key = tmnt.characters[i].key;
    var xhr = new XMLHttpRequest();
    xhr.open("DELETE", "https://9er.firebaseio.com/" + key + "/.json");
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 400) {
            tmnt.characters.splice(i, 1);
            tmnt.drawTable();
        }

    }
    xhr.send();

};
tmnt.nameSort = function (a, b) {
    var a1 = a.species.toLowerCase();
    var b1 = b.species.toLowerCase();

    if (a1 < b1) {
        return 1;
    }
    else if (a1 > b1) {
        return -1;
    }
    return 0;
};